<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="d" uri="/WEB-INF/resource.tld"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

</head>
<!-- end header -->
<body>
  <div class="page-group">
    <div class="page page-current moyu-page">

      <div class="content">
        <!-- Slider -->
        <div class="swiper-container" data-space-between='10'>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="${ctx.resource}/image/moyu/11.jpg?v=001" alt="">
            </div>
            <div class="swiper-slide">
              <img src="${ctx.resource}/image/moyu/12.jpg?v=001" alt="">
            </div>
            <div class="swiper-slide">
              <img src="${ctx.resource}/image/moyu/13.jpg?v=001" alt="">
            </div>
            <div class="swiper-slide">
              <img src="${ctx.resource}/image/moyu/14.jpg?v=001" alt="">
            </div>
          </div>
          <div class="title-area">
            <div class="price-area">
              <h3><span>￥</span>118</h3>
            </div>
            <div class="clearfix">
              <h3 class="sku-title pull-left">人马君 乐在美味即食魔芋拌面（肽+） 轻卡低热量 减脂餐 魔芋面主食品方便即食速食</h3>
            </div>
            <div class="small-area clearfix">
              <p class="pull-right">销量：<span>${product.sales}</span></p>
            </div>
          </div>
          <div class="moyu-gray"></div>
          <div class="moyu-info clearfix">
            <p class="pull-left gray"><span>运费：</span>盒邮</p>
            <p class="pull-right gray" style="padding-right: 15px;">剩余：${product.total - product.sales}</p>
          </div>
          <div class="moyu-gray"></div>
          <div class="moyu-info clearfix">
            <p class="pull-left gray">服务：</p>
            <p class="pull-left" style="padding-left: 0px;">收货后结算 · 快递发货</p>
          </div>
          <div class="moyu-info clearfix">
            <p class="pull-left gray">选择：</p>
            <p class="pull-left"  style="padding-left: 0px;">规则 · 口味</p>
          </div>
          <div class="moyu-gray"></div>
          <div class="description-area">
          <!-- <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_01.png" alt="" /> -->
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_02.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_03.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_04.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_05.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_06.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_07.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_08.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_09.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_10.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_11.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_12.png" alt="" />
          <img src="https://prod.qiniu.fit-start.edoomath.com/4_moyu_13.png" alt="" />
          </div>
        </div>
      </div>
      <!-- End Content -->
      <nav class="bar bar-footer product-detail-footer">
        <a href="javascript:void(0);" class="button button-fill button-buy open-select-btn">18:00开启购买</a>
        <a href="${ctx.host}/moyu/orders" class="button button-fill button-up">
          <i class="icon icon-me" style="display: block;margin: 0px;margin-top: 5px;"></i>
          <span style="display: block;font-size: 14px;line-height: 20px;">我的</span>
        </a>
      </nav>
    </div>
  </div>
  
  <!-- About Popup -->
  <div class="popup popup-about select-pop moyu-page" style="position: relative;">
    <p style="position: absolute;width: 30px;line-height: 30px;color: #333;right: 10px;z-index: 999;margin: 0px;display: block;text-align: center;top: 5px;right: 5px;"><a href="#" class="close-popup"><span class="icon icon-down" style="color: #333;"></span></a></p>
    <div class="content-block">
      <div class="card" style="margin: 0px; border-bottom: 1px solid #f8f8f8;">
        <div class="card-content">
          <div class="list-block media-list">
            <ul>
              <li class="item-content" style="padding: 0px;">
                <div class="item-media">
                  <img src="${ctx.resource}/image/moyu/moyu-1.jpg" width="44">
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title" style="color: #F74C4E; font-size: 20px;"><span style="font-size: 14px;">￥</span>118</div>
                  </div>
                  <div class="item-subtitle" style="font-size: 12px; margin-top: 10px; line-heiht: 12px;">剩余${product.total - product.sales}件</div>
                  <div class="item-subtitle" style="font-size: 12px; margin-top: 0px; line-heiht: 12px;">已选口味：<span class="label-info"></span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="select-label" style="margin: 10px 0;">
        <p style="font-size: .7rem; margin: 0px;">口味：</p>
        <div class="clearfix label-area">
          <label style="font-size: .7rem;margin: 0px;border: 1px solid #333;color: #333;padding: 3px;border-radius: 3px;font-size: .6rem;margin-right: 10px;" for="" class="pull-left active">香辣钵钵鸡味6盒</label>
          <label style="font-size: .7rem;margin: 0px;border: 1px solid #333;color: #333;padding: 3px;border-radius: 3px;font-size: .6rem;margin-right: 10px;" for="" class="pull-left">葱油鸡汁味6盒</label>
          <label style="font-size: .7rem;margin: 0px;border: 1px solid #333;color: #333;padding: 3px;border-radius: 3px;font-size: .6rem;margin-right: 10px; margin-top: 10px;" class="pull-left">葱油鸡汁味3盒+香辣钵钵鸡味3盒</label>
        </div>
      </div>
      <div class="select-label">
        <div class="clearfix">
          <p style="font-size: .7rem; margin: 0px;" class="pull-left">数量</p>
          <p style="font-size: .7rem; margin: 0px;" class="buttons-row pull-right">
            <a href="#" class="button jian-btn" style="color: #999;">-</a>
            <a href="#" class="button value-btn disabled" style="color: #333; border-left-color: #fff; border-right-color: #fff;">1</a>
            <a href="#" class="button jia-btn" style="border-left-color: #fff; color: #999;">+</a></p>
        </div>
      </div>
      <p style="margin-top: 50px;"><a href="${ctx.host}/moyu/shop?type=1&amount=1" class="button button-fill button-danger go-btn">下一步</a></p>
      
    </div>
    
      
  </div>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/product/moyu-detail.js" />
  <script type="text/javascript">
      var jsConfig = JSON.parse('${wechatJsConfig}')
      require(['page/product/moyu-detail'], function(page) {
        page.init({
          jsConfig: jsConfig
        })
      })
    </script>

</body>
</html>